<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript">
        var Vheader={
            data(){
                return {

                }
            },
            template:'<div>我是头部组件</div>',
            methods:{

            }
        };

        var Vaside={
            template:'<div>我是侧边栏组件</div>'
        };

        var Vcontent={
            template:'<div>我是内容组件</div>'
        };

        //声子
        var App={
            components: {
                Vheader,
                Vaside,
                Vcontent
            },
            template: '<div>我是入口组件<br>' +
                '<Vheader/>' +
                '<div>' +
                '<Vaside/><Vcontent/>' +
                '</div>' +
                '</div>'
        }

        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            components: {
                //挂子
                App
            },
            template: '<App/>'
        });
    </script>
</body>
</html>
